<template>
    <v-container fluid>
        <!-- <div class="toolbar">
            <v-toolbar>
                <v-btn icon class="hidden-xs-only">
                    <v-icon>mdi-arrow-left</v-icon>
                </v-btn>
                <v-toolbar-title>
                    搜索框
                </v-toolbar-title>
                <v-spacer></v-spacer>
                <v-btn icon class="hidden-xs-only">
                    <v-icon>mdi-magnify</v-icon>
                </v-btn>
            </v-toolbar>
        </div> -->
        <v-list lines="three" item-props>
            <!-- <v-list-item @click="viewWordList({id:-1})" title="全部单词"/> -->
            <v-list-item @click="viewWordList(book)" v-bind:key="book.id" v-for="book in bookList" :value="book.id"
                :title="book.title" :subtitle="book.remark" color="primary">
                <!-- <v-list-item-title>{{ book.title }}</v-list-item-title>
                <v-list-item-subtitle>{{ book.remark }}</v-list-item-subtitle> -->
                <template v-slot:append>
                    <v-btn @click.stop="itemMore(book)" color="grey-lighten-1" icon="mdi-menu-down"
                        variant="text"></v-btn>
                </template>
            </v-list-item>
        </v-list>
        <v-pagination active-color="primary" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" :length="total"
            @update:model-value="selectPage" style="margin-bottom: 30px;margin-left:-15px;margin-right: -15px"
            :model-value="bookBo.pageNum" />
    </v-container>
    <div v-if="false">
        <v-btn @click="openAddDictation" class="ma-2 btn_float" color="indigo" icon="mdi-plus"></v-btn>
    </div>
    <add-dictation :callback="getBookList" ref="AddDictation" />
    <!-- <router-view></router-view> -->
    <v-dialog v-model="dialog">
        <v-card>
            <v-card-title>
                {{ book.title }}
            </v-card-title>
            <v-card-text>
                <p>{{ book.remark }}</p>
                <v-btn @click="copyDiction(book)" color="success" class="ma-2">
                    创建副本
                </v-btn>
                <v-btn @click="copyDiction(book, true)" color="success" class="ma-2"
                    v-hasPerim="['update-book-copy-deep']">
                    创建副本（深拷贝）
                </v-btn>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn variant="text" @click="dialog = false">
                    关闭
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <v-snackbar v-model="snackbar">
        {{ snackbarMsg }}
    </v-snackbar>
    <v-dialog v-model="circleDialog" width="auto">
        <v-card>
            <v-card-text>
                <v-progress-circular title="处理中" :size="50" style="margin: auto;display: block;" indeterminate
                    color="primary" />
                <span>处理中</span>
            </v-card-text>
            <v-card-actions v-if="cancelLoadingDialog">
                <v-spacer></v-spacer>
                <v-btn @click="circleDialog = false; cancelLoadingDialog = false" text="关闭" />
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
// import { addLabel } from "@/api/label.js";
import AddDictation from '@/components/AddDictation.vue';
import { defaultBookList, deleteBook, copyBook } from "@/api/book.js";
export default {
    name: 'DefaultBookListView',
    components: { AddDictation },
    data() {
        return {
            snackbar: false,
            dialog: false,
            bookList: [],
            bookBo: {
                pageSize: 20,
                pageNum: 1
            },
            total: 0,
            book: {},
            snackbarMsg: '',
            circleDialog: false,
            cancelLoadingDialog: false
        }
    },
    created() {
        this.getBookList()
    },
    methods: {
        openAddDictation() {
            this.$refs.AddDictation.toggle(true)
        },
        getBookList() {
            defaultBookList(this.bookBo).then(resp => {
                this.bookList = resp.rows;
                if (resp.total % this.bookBo.pageSize == 0)
                    this.total = resp.total / this.bookBo.pageSize
                else this.total = parseInt(resp.total / this.bookBo.pageSize) + 1
            })
        },
        viewWordList(book) {
            this.$router.push({ name: 'default-word-list', params: { bookId: book.id } })
        },
        itemMore(book) {
            this.book = book
            this.dialog = true
        },
        deleteBook(bookId) {
            deleteBook(bookId).then(resp => {
                if (resp.code == 0) {
                    this.snackbarMsg = resp.msg
                    this.snackbar = true
                }
            }).catch((error) => {
                this.snackbarMsg = '错误：' + error
                this.snackbar = true
            }).finally(() => {
                this.getBookList()
                this.dialog = false
            })
        },
        copyDiction(book, deepCopy) {
            this.circleDialog = true
            book.deepCopy = deepCopy === true || deepCopy ? true : false
            copyBook(book).then((resp) => {
                this.snackbar = true
                this.snackbarMsg = resp.msg
                this.getBookList()
            }).catch(err => {
                this.snackbar = true
                this.snackbarMsg = '错误：' + err
                console.log('错误：', err)
            })
                .finally(() => {
                    this.dialog = false
                    this.circleDialog = false
                })
        },
        selectPage(num) {
            this.bookBo.pageNum = num
            this.getBookList()
        },
    }
}
</script>

<style scoped>
.btn_float {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.toolbar {
    position: fixed;
    top: 65px;
    width: 100%;
    left: 0;
    z-index: 100;
    height: fit-content;
}
</style>